<template>
  <a-modal :visible="dialogVisible" :title="title" @cancel="$emit('update:visible', false)" v-bind="$attrs">
    <slot></slot>
    <template slot="footer">
      <slot name="action"></slot>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'CustomDialog',
  props: {
    visible: Boolean,
    title: {
      type: String,
      default: 'Modal',
    }
  },
  data(){
    return {
      dialogVisible: this.visible,
    }
  },
  watch: {
    visible(val){
      this.dialogVisible = val
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
